<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>学习资料</title>
    <link rel="stylesheet" href="plugin/seedsui.min.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/leaning.css">
</head>

<body>
    <div id="header" class="clearfix">
        <div class="logo fl">
            <a href="">
                <img src="./images/logo.png" alt="">
            </a>
        </div>
        <div class="search fl">
            <input type="text" placeholder="请输入搜索内容">
        </div>
        <div class="search_btn fr">
            <span>搜索</span>
            <i class="icon icon-qrcode"></i>
        </div>
    </div>


    <div class="notes">
        <div class="notes_title clearfix">
            <span>课程笔记</span>
            <i class="fr icon icon-write-fill"></i>
        </div>
        <ul class="notes_txt">
            <!-- 笔记 -->
            <!-- 加载模板 -->
        </ul>

    </div>

    <div class="share" style="margin-bottom:.9rem;">
        <ul id="share">
            <h3>学员评论</h3>
            <!-- 学员评论 -->

            <!-- 加载模板 -->
        </ul>
        <h1 id="ajax_Btn">开始加载数据</h4>
    </div>


    <!--底部导航-->
    <footer id="footer">
            <ul class="clearfix">
                <li>
                    <a  href="index.html"
                    >
                        <i class="home"></i>
                        <label>推荐</label>
                    </a>
                </li>
                <li>
                    <a class="base_active" href="leaning.html">
                        <i class="date"></i>
                        <label>学习资料</label>
                    </a>
                </li>
                <li>
                    <a href="me.html">
                        <i class="me"></i>
                        <label>我的</label>
                    </a>
                </li>
            </ul>
        </footer>
    <script src="plugin/seedsui.min.js"></script>
    <script src="plugin/jquery.js"></script>
    <script src="js/rem.js"></script>
    <script>
        $(".share-text").each(function () {
            var maxwidth = 89;
            if ($(this).text().length > maxwidth) {
                $(this).text($(this).text().substring(0, maxwidth));
                $(this).html($(this).html() + '...');
            }
        });
        // 加载笔记数据
        function noteData(params) {
            let html = '';
            for (let i = 0; i < 4; i++) {
                html += '<li class="notes_li" data_id="123434">';
                html += '<p>"牵手未来"青少年这个标题</p>';
                html += '<p>的时间过来撒打发楼上的阿萨德龙卷风卡萨丁斯大林放假了圣诞节法拉盛阿里斯顿放假快乐撒大家分开来说斯大林福建省大立科技飞洒是法律手段附件收到啦是拉动房价奥斯卡大家发圣诞节法拉盛；阿斯兰的飞洒来的发送到按商品房就为了骂呗爱宠物io那么卡我们村</p>';
                html += '</li>';
            }
            $('.notes_txt').append(html);
            $('.notes_txt li').on('click', function () {
                var index_id = $(this).attr('data_id');
                alert('现在笔记是假的没有参数，占时跳转note页面')
                // window.location.href = './html/note.html?id=' + index_id;
            })
        }
        noteData();

        // $.ajax({
        //     type: "get",
        //     url: "./json/star.php",
        //     // data: "data",
        //     dataType: "json",
        //     success: function (res) {
        //         var html = '';

        //         for (let i = 0; i < 4; i++) {
        //             html += '<li class="notes_li" data_id="123434">';
        //             html += '<p>"牵手未来"青少年这个标题</p>';
        //             html += '<p>的时间过来撒打发楼上的阿萨德龙卷风卡萨丁斯大林放假了圣诞节法拉盛阿里斯顿放假快乐撒大家分开来说斯大林福建省大立科技飞洒是法律手段附件收到啦是拉动房价奥斯卡大家发圣诞节法拉盛；阿斯兰的飞洒来的发送到按商品房就为了骂呗爱宠物io那么卡我们村</p>';
        //             html += '</li>';
        //         }
        //         $('.notes_txt').append(html);
        //         $('.notes_txt li').on('click', function () {
        //             var index_id = $(this).attr('data_id');
        //             alert('现在笔记是假的没有参数，占时跳转note页面')
        //             // window.location.href = './html/note.html?id=' + index_id;
        //         })
        //     }
        // });
        /*
                     学员评论区域需要滚动加载
                     1. 获取评论区域距离顶部的距离
                     2. 获取滚动条距离顶部的距离
                     3. 获取窗口的高度
                 */
        var share = $('#ajax_Btn'),
            isLoad = true,
            currentPage = 1,
            nomore_Text = '没有更多的数据了';

        // 学员评论
        function loadData() {
            isLoad = false;
            $.ajax({
                type: "get",
                url: "http://192.168.3.188/service/px/comment_list.json",
                data: { tbl_name: 'course', tbl_id: '706', page: currentPage },
                dataType: "json",
                success: success_dis,
                erron: function () {
                    alert('请求错误');
                }
            });
        }

        // 评论成功回调函数
        function success_dis(data) {
            isLoad = true;
            currentPage++;
            console.log(data);
            let res = data.list,
                html = '';
            // 学员评论
            for (let i = 0; i < res.length; i++) {
                html += '<li>';
                html += '<div class="share-title clearfix">';
                html += '<a class="fl" href="">';
                html += '<img src="./images/logo.png" alt="">';
                html += '</a>';
                html += '<div class="fl">';
                html += '<p>' + res[i].name + '</p>';
                html += '<i>' + res[i].add_time + '</i>';
                html += '</div>';
                html += '</div>';
                html += '<div class="share-txt">';
                html += '<h3>' + res[i].title + '</h3>';
                html += '<p class="share-txt-num">' + res[i].text + '</p>';
                html += ' </div>';
                html += '<div class="share-bottom clearfix">';
                html += '<span class="fl">浏览<i>36</i>次</span>'
                html += '<span class= "fr">5评论</span>';
                html += '<span class="fr">10点赞</span>';
                html += '</div>';
                html += '</li>';
            }
            $('#share').append(html);
            //接口是否查询完毕
            //接口是否查询完毕
            if (data.pager.pageCount == data.pager.pageNumber || currentPage > data.pager.pageCount) {
                // if (data.pageCount == data.pageNo || currentPage > data.pageCount) {
                //数据全部加载完毕
                isLoad = false;
                // 如果加载完所有数据，显示不能加载更多
                share.html(nomore_Text);
            }
            // 学院评论 限制字符个数
            $(".share-txt-num").each(function () {
                var maxwidth = 130;
                if ($(this).text().length > maxwidth) {
                    $(this).text($(this).text().substring(0, maxwidth));
                    $(this).html($(this).html() + '...');
                }
            });

        }
        // 判断是否应该开始加载
        function isScrollLoad() {
            var share_top = share.offset().top,
                win_height = $(window).height(),
                scroll_top = $(window).scrollTop(),
                loading_height = share.height();
            return share_top < scroll_top + win_height - (loading_height - 50) ? true : false;
        }
        // 滚动问题改变样式布局
        $(window).scroll(function () {

            // 评论区滚动加载
            var _needload = isScrollLoad();
            if (_needload && isLoad) {
                loadData();
            }

        });


    </script>



</body>

</html>